import PropTypes from "prop-types";

function List({ category = "Category", items = [] }) {

  const listItems = items.map((item) => {
    return (
      <li key={item.id}>
        {item.name} &nbsp; {item.calories}
      </li>
    );
  });

  return (
    <>
      <h3 className="list-category">{category}</h3>
      <ol className="list-items">{listItems}</ol>
    </>
  );
}

List.propTypes = {
  category: PropTypes.string,
  items: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      name: PropTypes.string,
      calories: PropTypes.number,
    })
  ),
};

export default List;
